<template>
  <div class="patient-reported-right-priority">
    <span>请优先填写 [ {{ content }} ] !</span>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      content: ""
    };
  },
  computed: {
    ...mapState({
      priority: state => state.treatment.priority
    })
  },
  watch: {
    priority: {
      handler: function (val) {
        if (val && val.length > 0) {
          let temp;
          if (val.length === 1) {
            temp = `‘${val[0].tableName}’`;
          } else {
            val.forEach((item, index) => {
              if (index === 0) {
                temp = `‘${item.tableName}’`;
              } else {
                temp = `${temp}，‘${item.tableName}’`;
              }
            });
          }
          this.content = temp;
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style lang="scss" scoped>
.patient-reported-right-priority {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #303133;
  font-size: 0.8rem;
}
</style>
